<template>
  <div class="app-container" v-loading="loading">
    <el-form
      ref="formRef"
      :inline="false"
      :model="form"
      :rules="rules"
      label-width="110px"
      :disabled="!!form.id"
    >
      <!-- <el-form-item label="来源" prop="source">
        <el-radio-group v-model="form.source" :disabled="!!form.id">
          <el-radio
            v-for="dict in order_source"
            :key="dict.value"
            :value="dict.value"
            >{{ dict.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="选择订单" prop="orderList">
        <el-table
          :data="form.orderList"
          border
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column label="订单编号" prop="orderCode" />
          <el-table-column label="产品编号" prop="prodCode" />
          <el-table-column label="产品名称" prop="prodName" />
          <el-table-column label="计划产量" prop="planNumber" />
          <el-table-column label="单位" prop="unit" />
          <el-table-column label="计划开始时间" prop="planStartTime">
            <template #default="scope">
              <span>{{ scope.row.planStartTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划结束时间" prop="planEndTime">
            <template #default="scope">
              <span>{{ scope.row.planEndTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工厂" prop="factoryName" />
          <el-table-column label="工段" prop="workShopName" />
          <el-table-column label="来源" prop="source"
            ><template #default="scope">
              <dict-tag :options="order_source" :value="scope.row.source" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入内容"
          style="width: 625px"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="wordOrderDiv">
      <div>生产工单</div>
      <div>
        <el-button
          link
          v-if="form.source == 'ERP'"
          type="primary"
          @click="handleDisOrder()"
          >已拆解工单</el-button
        >
      </div>
    </div>
    <div
      style="width: 100%; height: 1px; background-color: #eee; margin: 10px 0"
    ></div>
    <el-table
      :data="workOrderList"
      border
      :header-cell-class-name="start"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column label="工单编号" prop="workOrderCode">
        <!-- <template #default="scope">
          <code-input
            v-model="scope.row.workOrderCode"
            code="PLAN_CODE"
            :disabled="!!scope.row.id"
            placeholder="请输入工单编号"
          />
        </template> -->
      </el-table-column>
      <el-table-column label="产线" prop="lineName">
        <!-- <template #default="scope">
          <el-select
            v-model="scope.row.lineCode"
            placeholder="请选择产线"
            clearable filterable
            @change="handleSearchProdChange(scope.row.lineCode, scope.$index)"
            :disabled="!!scope.row.id"
          >
            <el-option
              v-for="(item, index) in workshopOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </template> -->
      </el-table-column>
      <el-table-column label="工艺段" prop="sectionName">
        <!-- <template #default="scope">
          <el-select
            v-model="scope.row.sectionCode"
            placeholder="请选择工艺段"
            clearable filterable
            :disabled="!!scope.row.id"
            @change="
              handleSearchSectionChange(scope.row.sectionCode, scope.$index)
            "
          >
            <el-option
              v-for="(item, index) in scope.row.sectionList"
              :key="index"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </template> -->
      </el-table-column>
      <el-table-column label="计划产量" prop="planNumber">
        <!-- <template #default="scope">
          <el-input
            v-model="scope.row.planNumber"
            placeholder="请输入计划产量"
            clearable
            :disabled="!!scope.row.id"
          />
        </template> -->
      </el-table-column>
      <el-table-column label="单位" prop="unit" width="60" />
      <el-table-column label="计划开始时间" prop="planStartTime" width="170">
        <!-- <template #default="scope">
          <el-date-picker
            v-model="scope.row.planStartTime"
            type="date"
            value-format="YYYY-MM-DD"
            style="width: 150px"
            :disabled="!!scope.row.id"
          ></el-date-picker>
        </template> -->
      </el-table-column>
      <el-table-column label="计划结束时间" prop="planEndTime" width="170">
        <!-- <template #default="scope">
          <el-date-picker
            v-model="scope.row.planEndTime"
            type="date"
            value-format="YYYY-MM-DD"
            style="width: 150px"
            :disabled="!!scope.row.id"
          ></el-date-picker>
        </template> -->
      </el-table-column>
    </el-table>
    <disOrderList
      @changeDisOrderList="changeDisOrderList"
      :title="'已拆解工单'"
      :openDisOrder="openDisOrder"
      :orderList="workOrderList"
    ></disOrderList>
  </div>
</template>

<script setup name="Data">
import { getMatCodeList } from "@/api/technology/processRoute";
import { listWorkOrder, getWorkOrder } from "@/api/base/workOrder/workOrder";
import { reactive, useAttrs } from "vue";
import disOrderList from "./../workOrder/disOrderList";
const { proxy } = getCurrentInstance();
const { order_source } = proxy.useDict("order_source");

const attrs = useAttrs();
const start = ({ row, rowIndex, column, columnIndex }) => {
  if (columnIndex != 7) {
    return "start";
  }
};

const data = reactive({
  rules: {
    source: [{ required: true, message: "来源不能为空", trigger: "change" }],
    orderList: [
      { required: true, message: "选择订单不能为空", trigger: "change" },
    ],
  },
  form: {
    source: "ERP",
    orderList: [],
  },
});
const workOrderList = ref([]);
const loading = ref(false);
const openDisOrder = ref(false);
const formRef = ref(null);
const { form, rules } = toRefs(data);
const workshopOptions = ref([]);
const emit = defineEmits(["close", "setTitle", "setActions", "setIsActionTop"]);
const actions = ref([
  {
    text: "取 消",
    theme: "",
    handle: () => {
      cancel();
    },
  },
]);
function changeDisOrderList() {
  openDisOrder.value = false;
}
function getDetail(id) {
  loading.value = true;
  reset();
  getWorkOrder(id).then((res) => {
    form.value = res.data;
    form.value.orderList = [res.data];
    getWorkOrderList(res.data.orderCode);
    loading.value = false;
  });
}

function getWorkOrderList(orderCode) {
  listWorkOrder({ orderCode }).then((res) => {
    workOrderList.value = res.rows;
    getMatCodeListData("edit");
  });
}

function getMatCodeListData(type) {
  let params = {
    matCode: form.value.orderList[0].prodCode,
    planNum: form.value.orderList[0].planNumber,
  };
  getMatCodeList(params).then((res) => {
    workshopOptions.value = res?.data || [];
    if (type == "edit") {
      console.log(
        workOrderList.value,
        "workOrderList.value",
        workshopOptions.value
      );
      workOrderList.value = workOrderList.value.map((item) => {
        return {
          ...item,
          sectionList:
            workshopOptions.value.find((items) => {
              return items.code == item.lineCode;
            })?.children || [],
        };
      });
    }
  });
}

function handleSearchProdChange(lineCode, index) {
  workOrderList.value[index].sectionCode = "";
  workOrderList.value[index].planNumber = "";
  workOrderList.value[index].sectionList =
    workshopOptions.value.find((item) => {
      return item.code == lineCode;
    })?.children || [];
}

function handleSearchSectionChange(sectionCode, index) {
  workOrderList.value[index].planNumber =
    workOrderList.value[index].sectionList.find((item) => {
      return item.code == sectionCode;
    })?.number || 50;
}

function handleDisOrder() {
  if (form?.value?.orderList.length) {
    openDisOrder.value = true;
  } else {
    proxy.$modal.msgError("请先选择生产订单！");
  }
}

/** 表单重置 */
function reset() {
  form.value = {
    name: undefined,
    type: undefined,
  };
  formRef.value.resetFields();
}
function cancel() {
  emit("close");
}
onMounted(async () => {
  const { data } = attrs;

  if (data.id) {
    getDetail(data.id);
    actions.value = [
      {
        text: "取 消",
        theme: "",
        handle: () => {
          cancel();
        },
      },
    ];
    emit("setActions", actions.value);
  } else {
  }
});
</script>
<style lang="scss" scoped>
.wordOrderDiv {
  display: flex;
  justify-content: space-between;
}
:deep(.tableTrayQuality .el-form-item) {
  margin-bottom: 0 !important;
}
:deep(.el-table table tr th.start div:before) {
  content: "*";
  color: red;
}
</style>
